<template>
  <div class="app-container home">
    <!-- 标题区域 -->
    <el-row :gutter="5" class="title-section">
      <div class="content-text">
        <div class="glowing-title">
          <h1>AgroAI Toolkit</h1>
          <div class="title-sub">植保先锋平台</div>
        </div>
        <p class="subtitle">融合"天-空-地"一体化数据，打造智能病虫害防控生态系统</p>
        <p class="subtitle">让每一寸农田都拥有专属的AI植保专家</p>
      </div>
    </el-row>

    <!-- 数据统计区域 -->
    <el-row :gutter="20" class="stats-section">
      <el-col :xs="12" :sm="6" :lg="3">
        <div class="stat-card">
          <div class="stat-icon">🌿</div>
          <div class="stat-number">412</div>
          <div class="stat-label">病虫害图谱</div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="6" :lg="3">
        <div class="stat-card">
          <div class="stat-icon">📷</div>
          <div class="stat-number">1870+</div>
          <div class="stat-label">高清症状图</div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="6" :lg="3">
        <div class="stat-card">
          <div class="stat-icon">🛡️</div>
          <div class="stat-number">6284</div>
          <div class="stat-label">防治措施</div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="6" :lg="3">
        <div class="stat-card">
          <div class="stat-icon">🎯</div>
          <div class="stat-number">97.6%</div>
          <div class="stat-label">识别精度</div>
        </div>
      </el-col>
    </el-row>

    <!-- 功能介绍区域 -->
    <el-row :gutter="40" class="intro-section">
      <el-col :sm="24" :lg="18">
        <div class="content-text intro-content">
          <div class="tech-card">
            <div class="tech-glow"></div>
            <p>作品以若依为框架展开开发与训练。前端借助若依系统框架，搭建适用于农业领域使用的界面平台，在菜单栏实现主要功能的索引，排布既条理清晰，又符合大众审美，提升用户使用效率。</p>
            <p>模型训练的数据集来源于Kaggle网站上的病虫害图片及其相关信息，通过后端处理，将数据集与原创模型相关联，实现模型的开发与训练，完成了作品功能的发展实现。</p>
            <p>作品现有功能主要从病虫害识别、AI问答、数据标注、历史记录四大板块进行推进。</p>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 功能卡片区域 -->
    <el-row :gutter="25" class="feature-cards">
      <el-col :xs="24" :sm="12" :lg="6">
        <div class="feature-card">
          <div class="card-glow"></div>
          <div class="feature-icon">
            <div class="icon-bg" style="background: linear-gradient(135deg, #00ffcc, #00ccff);">
              <i class="el-icon-search"></i>
            </div>
          </div>
          <h3>病虫害智能查询</h3>
          <p>利用AI模型快速识别农作物病虫害，大模型0.38秒返回精准识别结果，提供准确的诊断结果和防治建议。</p>
          <div class="feature-tag" style="background: linear-gradient(135deg, rgba(0, 255, 204, 0.2), rgba(0, 204, 255, 0.2));">
            <span class="glow-text">识别精度 97.6%</span>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="6">
        <div class="feature-card">
          <div class="card-glow"></div>
          <div class="feature-icon">
            <div class="icon-bg" style="background: linear-gradient(135deg, #ff00cc, #cc00ff);">
              <i class="el-icon-chat-dot-round"></i>
            </div>
          </div>
          <h3>AI气泡智能咨询</h3>
          <p>接入DeepSeek-R1大模型，支持128K上下文，融合卫星+无人机数据，生成个性化防治方案。</p>
          <div class="feature-tag" style="background: linear-gradient(135deg, rgba(255, 0, 204, 0.2), rgba(204, 0, 255, 0.2));">
            <span class="glow-text">天地空数据融合</span>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="6">
        <div class="feature-card">
          <div class="card-glow"></div>
          <div class="feature-icon">
            <div class="icon-bg" style="background: linear-gradient(135deg, #00ff66, #00ccff);">
              <i class="el-icon-edit"></i>
            </div>
          </div>
          <h3>迁移学习智能标注</h3>
          <p>农技员拍照即可标注，10张样本提升mAP至90.4%，3分钟完成模型迭代，越用越聪明。</p>
          <div class="feature-tag" style="background: linear-gradient(135deg, rgba(0, 255, 102, 0.2), rgba(0, 204, 255, 0.2));">
            <span class="glow-text">迁移学习·实时迭代</span>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="6">
        <div class="feature-card">
          <div class="card-glow"></div>
          <div class="feature-icon">
            <div class="icon-bg" style="background: linear-gradient(135deg, #ffcc00, #ff6600);">
              <i class="el-icon-document"></i>
            </div>
          </div>
          <h3>智能历史记录</h3>
          <p>自动保存查询轨迹，68%二次打开率，支持数据导出与分享，建立个人植保知识库。</p>
          <div class="feature-tag" style="background: linear-gradient(135deg, rgba(255, 204, 0, 0.2), rgba(255, 102, 0, 0.2));">
            <span class="glow-text">数据可回溯</span>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 技术亮点 -->
    <el-row :gutter="20" class="tech-highlights">
      <el-col :xs="24" :sm="12" :lg="8">
        <div class="tech-item">
          <div class="tech-icon" style="color: #00ffcc;">🚀</div>
          <div class="tech-content">
            <h4>深度学习引擎</h4>
            <p>基于Transformer架构，支持多模态数据处理</p>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="8">
        <div class="tech-item">
          <div class="tech-icon" style="color: #ff00cc;">🛰️</div>
          <div class="tech-content">
            <h4>卫星数据融合</h4>
            <p>实时接入多源遥感数据，精准监测作物健康</p>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="8">
        <div class="tech-item">
          <div class="tech-icon" style="color: #00ccff;">🔬</div>
          <div class="tech-content">
            <h4>智能诊断算法</h4>
            <p>97.6%识别准确率，0.38秒快速响应</p>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 页脚 -->
    <el-row style="margin-top: 80px;">
      <el-col :span="24">
        <div class="footer">
          <div class="footer-glow"></div>
          <p>© 2025 AgroAI Toolkit 植保先锋平台 - 基于若依框架开发</p>
          <div class="footer-tech">AI-Powered Plant Protection System</div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Home",
  mounted() {
    this.addGlowEffects();
  },
  methods: {
    addGlowEffects() {
      // 为卡片添加鼠标跟随光效
      const cards = document.querySelectorAll('.feature-card');
      cards.forEach(card => {
        card.addEventListener('mousemove', (e) => {
          const rect = card.getBoundingClientRect();
          const x = e.clientX - rect.left;
          const y = e.clientY - rect.top;

          const glow = card.querySelector('.card-glow');
          if (glow) {
            glow.style.background = `radial-gradient(circle at ${x}px ${y}px,
              rgba(0, 255, 204, 0.3) 0%,
              rgba(0, 204, 255, 0.2) 30%,
              transparent 70%)`;
          }
        });
      });
    }
  }
}
</script>

<style scoped lang="scss">
.home {
  padding: 20px;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(0, 80, 120, 0.3) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(120, 0, 80, 0.3) 0%, transparent 50%),
    radial-gradient(ellipse at 40% 40%, rgba(0, 120, 80, 0.2) 0%, transparent 50%),
    linear-gradient(135deg, #0a0a0a 0%, #0f0f1a 30%, #0a0a14 70%, #050510 100%);
  min-height: calc(100vh - 84px);
  color: #ffffff;
  position: relative;
  overflow-x: hidden;
}

// 发光文字效果
.glow-text {
  text-shadow: 0 0 10px currentColor, 0 0 20px currentColor;
}

.title-section {
  text-align: center;
  margin-bottom: 50px;
  padding: 60px 20px;
  background:
    radial-gradient(ellipse at center, rgba(0, 40, 80, 0.4) 0%, transparent 70%),
    linear-gradient(135deg, rgba(10, 20, 40, 0.9) 0%, rgba(5, 15, 30, 0.95) 100%);
  border-radius: 20px;
  position: relative;
  border: 1px solid rgba(0, 255, 255, 0.1);
  box-shadow:
    0 0 50px rgba(0, 100, 255, 0.3),
    inset 0 0 50px rgba(0, 50, 100, 0.2);

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
      transparent,
      #00ffcc, #00ccff, #ff00cc, #00ffcc,
      transparent);
    animation: shimmer 3s infinite;
  }

  .glowing-title {
    h1 {
      font-size: 48px;
      font-weight: 800;
      margin-bottom: 10px;
      background: linear-gradient(135deg, #00ffcc, #00ccff, #ff00cc);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-shadow: 0 0 30px rgba(0, 255, 255, 0.5);
      animation: titleGlow 4s ease-in-out infinite;
    }

    .title-sub {
      font-size: 28px;
      color: #ccccff;
      margin-bottom: 30px;
      text-shadow: 0 0 20px rgba(200, 200, 255, 0.5);
    }
  }

  .subtitle {
    font-size: 18px;
    margin: 15px 0;
    color: #aaccff;
    text-shadow: 0 0 10px rgba(170, 204, 255, 0.3);
  }
}

.stats-section {
  margin: 50px 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;

  .stat-card {
    background: rgba(20, 25, 45, 0.6);
    border-radius: 16px;
    padding: 30px 20px;
    text-align: center;
    box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.4),
      0 0 20px rgba(0, 100, 255, 0.1);
    transition: all 0.4s ease;
    margin: 0 15px 25px;
    min-width: 140px;
    border: 1px solid rgba(0, 150, 255, 0.2);
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg,
        transparent,
        rgba(0, 255, 255, 0.1),
        transparent);
      transition: left 0.6s ease;
    }

    &:hover {
      transform: translateY(-10px) scale(1.05);
      box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.6),
        0 0 30px rgba(0, 200, 255, 0.3);

      &::before {
        left: 100%;
      }
    }

    .stat-icon {
      font-size: 32px;
      margin-bottom: 15px;
      filter: drop-shadow(0 0 10px rgba(0, 200, 255, 0.5));
    }

    .stat-number {
      font-size: 32px;
      font-weight: 800;
      color: #00ffff;
      margin-bottom: 8px;
      text-shadow: 0 0 20px rgba(0, 255, 255, 0.7);
    }

    .stat-label {
      font-size: 14px;
      color: #aaccff;
      font-weight: 500;
    }
  }
}

.tech-card {
  background: rgba(15, 20, 40, 0.7);
  border-radius: 16px;
  padding: 30px;
  border: 1px solid rgba(0, 150, 255, 0.2);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.4),
    inset 0 0 20px rgba(0, 50, 100, 0.1);
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;

  .tech-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
      transparent, #00ffcc, #00ccff, transparent);
    animation: shimmer 4s infinite;
  }

  p {
    font-size: 16px;
    line-height: 1.8;
    color: #ccddff;
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
  }
}

.feature-cards {
  margin-top: 50px;
}

.feature-card {
  background: rgba(20, 25, 45, 0.7);
  border-radius: 20px;
  padding: 35px 25px;
  text-align: center;
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.5),
    inset 0 0 20px rgba(0, 50, 100, 0.1);
  transition: all 0.4s ease;
  height: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  border: 1px solid rgba(0, 150, 255, 0.2);
  backdrop-filter: blur(10px);
  overflow: hidden;

  .card-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center,
      rgba(0, 255, 204, 0.1) 0%,
      transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
  }

  &:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow:
      0 20px 50px rgba(0, 0, 0, 0.7),
      0 0 40px rgba(0, 200, 255, 0.4);
    border-color: rgba(0, 255, 255, 0.4);

    .card-glow {
      opacity: 1;
    }

    .feature-icon .icon-bg {
      transform: scale(1.1) rotate(5deg);
      box-shadow: 0 0 30px currentColor;
    }
  }
}

.feature-icon {
  margin-bottom: 25px;

  .icon-bg {
    width: 90px;
    height: 90px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 36px;
    box-shadow: 0 0 20px currentColor;
    transition: all 0.4s ease;

    i {
      filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
    }
  }
}

.feature-card h3 {
  color: #ffffff;
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 700;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.feature-card p {
  color: #ccddff;
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 25px;
}

.feature-tag {
  padding: 10px 20px;
  border-radius: 25px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  position: absolute;
  bottom: 25px;

  .glow-text {
    color: #ffffff;
  }
}

.tech-highlights {
  margin-top: 60px;

  .tech-item {
    background: rgba(20, 25, 45, 0.6);
    border-radius: 16px;
    padding: 25px;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    border: 1px solid rgba(0, 150, 255, 0.2);
    transition: all 0.3s ease;

    &:hover {
      transform: translateX(10px);
      box-shadow: 0 0 30px rgba(0, 200, 255, 0.3);
    }

    .tech-icon {
      font-size: 40px;
      margin-right: 20px;
      filter: drop-shadow(0 0 10px currentColor);
    }

    .tech-content {
      h4 {
        color: #ffffff;
        margin-bottom: 8px;
        font-size: 18px;
      }

      p {
        color: #aaccff;
        font-size: 14px;
        margin: 0;
      }
    }
  }
}

.footer {
  text-align: center;
  padding: 40px 20px;
  color: #8899cc;
  position: relative;
  border-top: 1px solid rgba(0, 150, 255, 0.2);

  .footer-glow {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 1px;
    background: linear-gradient(90deg,
      transparent, #00ffcc, #00ccff, transparent);
  }

  p {
    margin: 0 0 10px 0;
    font-size: 14px;
  }

  .footer-tech {
    font-size: 12px;
    color: #6677aa;
    font-style: italic;
  }
}

// 动画定义
@keyframes shimmer {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

@keyframes titleGlow {
  0%, 100% {
    text-shadow: 0 0 30px rgba(0, 255, 255, 0.5),
    0 0 60px rgba(0, 255, 255, 0.3);
  }
  50% {
    text-shadow: 0 0 40px rgba(0, 255, 255, 0.8),
    0 0 80px rgba(0, 255, 255, 0.5),
    0 0 100px rgba(0, 255, 255, 0.3);
  }
}

// 响应式调整
@media (max-width: 1200px) {
  .title-section .glowing-title h1 {
    font-size: 36px;
  }

  .stats-section .stat-card {
    min-width: 120px;
    padding: 25px 15px;
  }
}

@media (max-width: 768px) {
  .home {
    padding: 15px;
  }

  .title-section {
    padding: 40px 15px;

    .glowing-title h1 {
      font-size: 28px;
    }

    .title-sub {
      font-size: 20px;
    }
  }

  .feature-card {
    height: auto;
    margin-bottom: 25px;
    padding: 30px 20px;
    min-height: 350px;
  }

  .stats-section {
    margin: 30px 0;

    .stat-card {
      margin: 0 10px 20px;
      min-width: 110px;
      padding: 20px 15px;
    }
  }
}

@media (max-width: 480px) {
  .stats-section {
    justify-content: space-around;

    .el-col {
      width: 45%;
    }
  }

  .tech-item {
    flex-direction: column;
    text-align: center;

    .tech-icon {
      margin-right: 0;
      margin-bottom: 15px;
    }
  }
}
</style>

